<div class="parent text-center">
  <ng-container *ngFor="let item of currentItems; index as i" >
    <div  (mouseover)="overOnFileSystem(true)"
          (mouseout)="overOnFileSystem(false)"
          (contextmenu)="openContextMenuFileSystem($event,i)"
          (click)="clickByFileSystem(i)"
          *ngIf="!item.isFile"
          [ngClass]="selectedIndex === i ? 'selected-items':''" class="item"
          (dblclick)="transitionToChildren(item.name!)">
      <div>
        <svg width="150" height="150"
             xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 48">
          <path fill="#FFA000" d="M40,12H22l-4-4H8c-2.2,0-4,1.8-4,4v8h40v-4C44,13.8,42.2,12,40,12z"></path>
          <path fill="#FFCA28" d="M40,12H8c-2.2,0-4,1.8-4,4v20c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V16C44,13.8,42.2,12,40,12z"></path>
        </svg>
        <div>
          {{item.name}}
        </div>
      </div>
    </div>
    <div  (mouseover)="overOnFileSystem(true)"
          (mouseout)="overOnFileSystem(false)"
          (contextmenu)="openContextMenuFileSystem($event, i)"
          (click)="clickByFileSystem(i)"
          [ngClass]="selectedIndex === i ? 'selected-items':''"
          *ngIf="item.isFile" class="item">
      <div>
        <svg
          width="150" height="130" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 48">
          <path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z"></path>
          <path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z"></path>
        </svg>
        <div>
          {{item.name}}
        </div>
      </div>
    </div>
  </ng-container>
</div>

<div #contextMenu>
  <app-context-menu
    [visible]="visibleContextMenu"
    [x]="x"
    [y]="y"
    (clickContext)="clickOnContext($event)"
    (mouseover)="onContextMenuOnContextMenuComponent(true)"
    (mouseout)="onContextMenuOnContextMenuComponent(false)"
  >
    <div class="button-item text-center">
      <div (click)="openChangeModal()">
        Change name
      </div>
    </div>
    <div class="button-item text-center">
      <div>
        <a [href]="downloadUrl" [download]="nameDownloadFile" (click)="download()">
          Download
        </a>
      </div>
    </div>
    <div class="end-item button-item text-center">
      <div (click)="openDeleteModal()">
        Delete
      </div>
    </div>
  </app-context-menu>
</div>
